<extend name="Layout::index"/>
<block name="title">
    <title>3D展示厅</title>
</block>
<block name="content">
    <div class="yd">
        <div class="yd1">
            <div class="dq_bj">
                <div class="dq">当前位置：<a href="#">沪佳工厂店</a> > 3D展厅</div>
            </div>
            <div id="container">
                <div id="wrap-container" class="clearfix">
                    <div class="examples_body">
                        <ul class="bannerHolder">
                            <foreach name="arrPhoto2" item="val">
                                <li>
                                    <div class=" banner_text{$val['id']}"><p
                                            style="font-size:24px; font-weight:bold; line-height:38px;font-family:" 微软雅黑""><a
                                            href="#" target="_blank">{$val['name']}</a></p>
                                        <p style="font-size:12px; font-family:" 微软雅黑""><a href="#"
                                                                                          target="_blank">{$val['remark']}</a></p></div>
                                    <div class="banner01">
                                        <a href="#" target="_blank"><img height="251" width="288" alt="The Best Designs"
                                                                         src="__PUBLIC__/upload/{$val['pic']}"/>
                                        </a>

                                        <div class="cornerTL"></div>
                                        <div class="cornerTR"></div>
                                        <div class="cornerBL"></div>
                                        <div class="cornerBR"></div>
                                    </div>
                                </li>
                            </foreach>
                            <li>
                                <div class=" banner_text1"><p style="font-size:24px; font-weight:bold; line-height:38px;font-family:"微软雅黑""><a href="#" target="_blank">现代简约</a></p>
                                    <p style="font-size:12px; font-family:"微软雅黑""><a href="#" target="_blank">抹不掉的经典，舒适浪漫</a></p></div>
                                <div class="banner01">
                                    <a href="#" target="_blank"><img height="251" width="288" alt="The Best Designs" src="__PUBLIC__/home/images/aloha.jpg" />
                                    </a>

                                    <div class="cornerTL"></div>
                                    <div class="cornerTR"></div>
                                    <div class="cornerBL"></div>
                                    <div class="cornerBR"></div>
                                </div>
                            </li>

                            <li>
                                <div class=" banner_text2">
                                    <p style="font-size:24px; font-weight:bold; line-height:38px;font-family:"微软雅黑""> <a href="#" target="_blank">奢华欧式</a></p>
                                    <p style="font-size:12px; font-family:"微软雅黑""><a href="#" target="_blank">雍容华贵，气度非凡</a></p></div>
                                <div class="banner01">
                                    <a href="#" target="_blank"><img height="251" width="288" alt="The Best Designs" src="__PUBLIC__/home/images/index11-08_96.jpg" />
                                    </a>

                                    <div class="cornerTL"></div>
                                    <div class="cornerTR"></div>
                                    <div class="cornerBL"></div>
                                    <div class="cornerBR"></div>
                                </div>
                            </li>

                            <li>
                                <div class=" banner_text3">
                                    <p style="font-size:24px; font-weight:bold; line-height:38px;font-family:"微软雅黑""><a href="#" target="_blank">复古中式</a></p>
                                    <p style="font-size:12px; font-family:"微软雅黑""><a href="#" target="_blank">九典红木，百年传承</a></p></div>
                                <div class="banner01">
                                    <a href="#" target="_blank"><img height="251" width="288" alt="The Best Designs" src="__PUBLIC__/home/images/index11-08_98.jpg" />
                                    </a>

                                    <div class="cornerTL"></div>
                                    <div class="cornerTR"></div>
                                    <div class="cornerBL"></div>
                                    <div class="cornerBR"></div>
                                </div>
                            </li>

                            <li>
                                <div class=" banner_text4">
                                    <p style="font-size:24px; font-weight:bold; line-height:38px;font-family:"微软雅黑""><a href="#" target="_blank">地中海</a></p>
                                    <p style="font-size:12px; font-family:"微软雅黑""><a href="#" target="_blank">蓝与白的邂逅</a></p></div>
                                <div class="banner01">
                                    <a href="#" target="_blank"><img height="251" width="288" alt="The Best Designs" src="__PUBLIC__/home/images/index11-08_100.jpg" />
                                    </a>

                                    <div class="cornerTL"></div>
                                    <div class="cornerTR"></div>
                                    <div class="cornerBL"></div>
                                    <div class="cornerBR"></div>
                                </div>
                            </li>

                            <li>
                                <div class=" banner_text5">
                                    <p style="font-size:24px; font-weight:bold; line-height:38px;font-family:"微软雅黑""><a href="#" target="_blank">清新田园</a></p>
                                    <p style="font-size:12px; font-family:"微软雅黑""><a href="#" target="_blank">自然风光，清新田园</a></p></div>
                                <div class="banner01">
                                    <a href="#" target="_blank"><img height="251" width="288" alt="The Best Designs" src="__PUBLIC__/home/images/index11-08_106.jpg" />
                                    </a>

                                    <div class="cornerTL"></div>
                                    <div class="cornerTR"></div>
                                    <div class="cornerBL"></div>
                                    <div class="cornerBR"></div>
                                </div>
                            </li>

                            <li>
                                <div class=" banner_text6">
                                    <p style="font-size:24px; font-weight:bold; line-height:38px;font-family:"微软雅黑""><a href="#" target="_blank">美式乡村</a></p>
                                    <p style="font-size:12px; font-family:"微软雅黑""><a href="#" target="_blank">轻美式，慢生活</a></p></div>
                                <div class="banner01">
                                    <a href="#" target="_blank"><img height="251" width="288" alt="The Best Designs" src="__PUBLIC__/home/images/index11-08_1071.jpg" />
                                    </a>

                                    <div class="cornerTL"></div>
                                    <div class="cornerTR"></div>
                                    <div class="cornerBL"></div>
                                    <div class="cornerBR"></div>
                                </div>
                            </li>

                            <li>
                                <div class=" banner_text7">
                                    <p style="font-size:24px; font-weight:bold; line-height:38px;font-family:"微软雅黑""><a href="#" target="_blank">英伦风</a></p>
                                    <p style="font-size:12px; font-family:"微软雅黑""><a href="#" target="_blank">时尚英伦学院风</a></p></div>
                                <div class="banner01">
                                    <a href="#" target="_blank"><img height="251" width="288" alt="The Best Designs" src="__PUBLIC__/home/images/index11-08_107.jpg" />
                                    </a>

                                    <div class="cornerTL"></div>
                                    <div class="cornerTR"></div>
                                    <div class="cornerBL"></div>
                                    <div class="cornerBR"></div>
                                </div>
                            </li>

                            <li>
                                <div class=" banner_text8">
                                    <p style="font-size:24px; font-weight:bold; line-height:38px;font-family:"微软雅黑""><a href="#" target="_blank">北欧风格</a></p>
                                    <p style="font-size:12px; font-family:"微软雅黑""><a href="#" target="_blank">简单高压，朴素品味</a></p></div>
                                <div class="banner01">
                                    <a href="#" target="_blank"><img height="251" width="288" alt="The Best Designs" src="__PUBLIC__/home/images/index11-08_108.jpg" />
                                    </a>

                                    <div class="cornerTL"></div>
                                    <div class="cornerTR"></div>
                                    <div class="cornerBL"></div>
                                    <div class="cornerBR"></div>
                                </div>
                            </li>


                        </ul>
                        <!-- Examples body -->
                    </div>
                </div>
                <!-- /COPYRIGHT -->
            </div>
        </div>
        </div>
        <script>
            jQuery(document).ready(function ($){
                $('.js-right>li:nth-child(2)').addClass('present');
            })
            jQuery(document).ready(function ($) {

                // 0.4代表遮罩的透明度
                $('.banner01 div').css('opacity', 0.2);

                $('.banner01').hover(function () {

                    var el = $(this);

                    // 先淡出阴影，后淡入文字
                    el.find('div').stop().animate({width: 220, height: 220}, 'slow', function () {

                        el.find('p').fadeIn('fast');
                    });

                }, function () {

                    var el = $(this);

                    // 隐藏文字
                    el.find('p').stop(true, true).hide();

                    // 去掉遮罩
                    el.find('div').stop().animate({width: 60, height: 60}, 'fast');

                }).click(function () {

                    // 点击图片时打开链接

                    window.open($(this).find('a').attr('href'));

                });
            });
        </script>

</block>